<template>
  <div>
    <CategorySelector :isForbiddenForm="isShowAttrList"></CategorySelector>
    <div style="margin-top: 10px">
      <el-card>
        <div v-if="isShowAttrList">
          <el-button
            :disabled="!categoryStore.category3Id"
            type="primary"
            :icon="Plus"
            @click="toSaveAttrValue"
            >添加属性</el-button
          >
          <el-table border style="margin-top: 10px" :data="attrList">
            <el-table-column
              label="序号"
              width="80px"
              type="index"
              align="center"
            ></el-table-column>
            <el-table-column label="属性名称" prop="attrName"></el-table-column>
            <el-table-column label="属性值列表">
              <template v-slot="{ row }">
                <el-tag
                  v-for="attrValue in row.attrValueList"
                  :key="attrValue.id"
                  :id="attrValue.id"
                  class="ml-2"
                  type="warning"
                  style="margin-right: 6px"
                  >{{ attrValue.valueName }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row, $index }">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="修改"
                  placement="top"
                >
                  <el-button
                    type="warning"
                    :icon="Edit"
                    plain
                    @click="toEditAttr(row, $index)"
                  />
                </el-tooltip>

                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="Warning"
                  icon-color="rgb(255, 153, 0)"
                  title="您确定要删除该数据吗?"
                  @confirm="deleteAttrOneData(row)"
                >
                  <template #reference>
                    <el-button type="danger" :icon="Delete" plain />
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else>
          <el-form>
            <el-form-item label="属性名" style="width: 300px">
              <el-input
                placeholder="请输入属性名"
                v-model="attrInfo.attrName"
                width="200px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :disabled="!attrInfo.attrName"
                :icon="Plus"
                @click="addAttrValue"
                >添加属性值</el-button
              >
              <!-- disabled当输入框没有值的时候禁用 -->
              <el-button type="default" @click="isShowAttrList = true"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
          <el-table border :data="attrInfo.attrValueList">
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="80px"
            ></el-table-column>
            <el-table-column label="属性值名称">
              <template v-slot="{ row, $index }">
                <el-input
                  size="small"
                  v-model="row.valueName"
                  v-if="row.isShowInput"
                  ref="inputRef"
                  @blur="deleteCurrentRow(row, $index)"
                  @keyup.enter="deleteCurrentRow(row, $index)"
                ></el-input>
                <span
                  v-else
                  @dblclick="toEditAttrValue(row, $index)"
                  style="display: inline-block; width: 100%"
                  >{{ row.valueName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row, $index }">
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="Warning"
                  icon-color="rgb(255, 153, 0)"
                  :title="`您确定要删除${row.valueName}吗?`"
                  @confirm="confirmEventAttrValue($index)"
                >
                  <template #reference>
                    <el-button type="danger" :icon="Delete" plain />
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="saveAttrInfo">保存</el-button>
          <el-button type="default" @click="isShowAttrList = true"
            >取消</el-button
          >
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import CategorySelector from "@/components/CategorySelector/index.vue"
export default {
  name: "Attr",
  components: { CategorySelector },
}
</script>
<script lang="ts" setup>
import { ref, watch, reactive, nextTick } from "vue"
import { Plus, Delete, Edit } from "@element-plus/icons-vue"
import { useCategoryListStore } from "@/stores/categoryList"
import {
  reqGetAttrListDataByCategory3Id,
  delAttrListData,
  reqAddOrUpdateAttrInfo,
} from "@/api/product/attr"
import { Warning } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import type {
  AttrInfoModel,
  AttrListModel,
  AttrValueInfoModel,
} from "@/api/product/model/attrModel"
// 互斥,添加分类跳转
const isShowAttrList = ref<boolean>(true)

// 定义一个数组来储存属性列表数据
const attrList = ref<AttrListModel>([])

// 获取store
const categoryStore = useCategoryListStore()

// 监视三级导航Id
// watch(
//   () => categoryStore.category3Id,
//   async (category3Id) => {
//     // console.log("三级分类", category3Id)
//     if (!category3Id) return
//     attrList.value = await reqGetAttrListDataByCategory3Id({
//       category1Id: categoryStore.category1Id,
//       category2Id: categoryStore.category2Id,
//       category3Id: categoryStore.category3Id,
//     })
//   }
// )

const getAttrListData = async () => {
  attrList.value = await reqGetAttrListDataByCategory3Id({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id,
  })
}
watch(
  () => categoryStore.category3Id,
  async (category3Id) => {
    if (!category3Id) {
      // 清空列表要清空
      attrList.value = [] // 更改分类的时候将数据内容清空,不要显示属性列表
      return // 如果category3Id为空 不要再发送请求
    }
    // 调用getAttrListData(),获取属性列表
    getAttrListData()
  },
  { immediate: true }
) // 开启立即监视

// 删除属性
const deleteAttrOneData = async (row: any) => {
  await delAttrListData(row.id)
  // 成功之后要重新发送请求
  getAttrListData()
}
// 点击添加属性时清空原先添加属性值中的数据
const toSaveAttrValue = () => {
  isShowAttrList.value = false // 显示添加属性值页面

  attrInfo.attrName = ""
  attrInfo.attrValueList = []
  delete attrInfo.id // 清除之前的id
}

// 添加属性
// 1.收集要添加的属性信息
const attrInfo = reactive<AttrInfoModel>({
  attrName: "", // 要存储的属性名
  attrValueList: [], // 存储属性的数组
  categoryLevel: 3, // 等级
  categoryId: -1, // id值
})
// 2.添加属性值
const inputRef = ref<HTMLInputElement>() // 实现自动获取焦点定义一个变量
const addAttrValue = () => {
  attrInfo.attrValueList.push({
    valueName: "",
    attrId: attrInfo.id, // 编辑的时候使用
    isShowInput: true, // 是不是显示输入框  还是说显示一个span标签
  })
  // 注意等页面中的内容渲染完毕之后，才来执行里面的业务逻辑
  nextTick(() => {
    inputRef.value?.focus()
  })
}
// 3.失去焦点删除当前没有属性值的那一项
const deleteCurrentRow = (row: AttrValueInfoModel, index: number) => {
  // 判断输入框是否有值
  if (row.valueName) return (row.isShowInput = false) //  如果有值,则失去焦点后显示span
  attrInfo.attrValueList.splice(index, 1) // 没有就删除当前行
}
// 4.修改属性值
const toEditAttrValue = (row: AttrValueInfoModel) => {
  row.isShowInput = true // 让输入框显示出来
  // 自动获取焦点
  nextTick(() => {
    inputRef.value?.focus()
  })
}
// 5.删除某项
const confirmEventAttrValue = (index: number) => {
  // console.log(index)
  attrInfo.attrValueList.splice(index, 1)
}
// 6.添加保存数据
const saveAttrInfo = async () => {
  // 将当前三级分类Id存入对象
  // console.log(attrInfo.categoryId)
  // console.log(categoryStore.category3Id)

  attrInfo.categoryId = categoryStore.category3Id
  // console.log(attrInfo)

  // // 发送请求
  await reqAddOrUpdateAttrInfo(attrInfo)
  ElMessage.success("添加成功")
  // // 跳转到列表页
  isShowAttrList.value = true
  // // 重新渲染页面
  getAttrListData()
}

// 修改属性
const toEditAttr = (row: AttrInfoModel) => {
  isShowAttrList.value = false
  Object.assign(attrInfo, row)
}
</script>

<style></style>
